<template>
  <Fullscreen v-bind="getStyle()" @close="fitView">
    <template #[slotName]>
      <div class="flow_echart_box">
        <VueFlow
          :nodes="chatNodes"
          :edges="chatEdges"
          fit-view-on-init
          default-marker-color="#409EFF"
          class="flowchat-container"
          ref="vueFlowRef"
        >
          <template #node-custom="props">
            <CustomNode v-bind="props.data"></CustomNode>
          </template>
          <Controls ref="controlRef" style="display: none;"/>
          <div class="vueflow_panel">
            <div class="panel_item" @click="zoomIn">放大</div>
            <div class="panel_item" @click="zoomOut">缩小</div>
            <div class="panel_item" @click="fitView">{{isFullScreen?'返回':'全屏'}}</div>
          </div>
        </VueFlow>
      </div>
    </template>
  </Fullscreen>
</template>
<script setup>
import {
  VueFlow,
  Position,
  Panel,
  useVueFlow,
  MarkerType,
} from "@vue-flow/core";
import { Controls } from "@vue-flow/controls";
import { ref, onMounted } from "vue";
import CustomNode from "./CustomNode.vue";
import Fullscreen from "@/components/Fullscreen.vue";
const vueFlowRef = ref(null);
const controlRef = ref(null);
const slotName = ref("default");
const isFullScreen = ref(false);
//节点
const chatNodes = ref([
  {
    id: "1",
    position: { x: 50, y: 100 },
    type: "custom",
    data: {
      label: "我是自定义节点1",
      vaildPostion: "Right",
    },
  },
  {
    id: "2",
    type: "custom",
    position: {
      x: 300,
      y: 50,
    },
    data: {
      label: "我是自定义节点2",
      vaildPostion: "Left",
    },
  },
  {
    id: "3",
    position: { x: 300, y: 100 },
    type: "custom",
    data: {
      label: "我是自定义节点3",
      vaildPostion: "Left",
    },
  },
  {
    id: "4",
    position: { x: 300, y: 150 },
    type: "custom",
    data: {
      label: "我是自定义节点4",
      vaildPostion: "Left",
    },
  },
]);
//边
const chatEdges = ref([
  {
    id: "e1->2",
    source: "1",
    target: "2",
    type: "smoothstep",
    markerEnd: MarkerType.Arrow,
    style: { stroke: "#10b981" },
  },
  {
    id: "e1->3",
    source: "1",
    target: "3",
    type: "smoothstep",
    markerEnd: MarkerType.Arrow,
    style: { stroke: "#10b981" },
  },
  {
    id: "e1->4",
    source: "1",
    target: "4",
    type: "smoothstep",
    markerEnd: MarkerType.Arrow,
    style: { stroke: "#10b981" },
  },
]);
onMounted(()=>{
  interactive()
})
const zoomIn = () => {
  vueFlowRef.value.zoomIn();

};
const zoomOut = () => {
  vueFlowRef.value.zoomOut();
};
const interactive=()=>{
  console.log(11,vueFlowRef.value)
  vueFlowRef.value.setInteractive(false)
}
const fitView = () => {
  isFullScreen.value = !isFullScreen.value;
  vueFlowRef.value.$reset()
  if (isFullScreen.value) {
    slotName.value = "mask";
  } else {
    slotName.value = "default";
  }
};
const props = defineProps({
  height: {
    default: "100%",
    type: [Number, String],
  },
  width: {
    default: "100%",
    type: [Number, String],
  },
});
const getStyle = () => {
  const style = {
    height:
      typeof props.height === "number" ? `${props.height}px` : props.height,
    width: typeof props.width === "number" ? `${props.width}px` : props.width,
  };
  return style;
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.flow_echart_box {
  width: 100%;
  height: 100%;
  .flowchat-container {
    // width: 1000px;
    // height: 500px;
    width: 100%;
    height: 100%;
    background-color: #111c2d;
    border-radius: 4px;
    position: relative;
    .vueflow_panel {
      width: 150px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: all;
      z-index: 999;
      position: absolute;
      height: 30px;
      top: 0;
      right: 0;
      .panel_item {
        cursor: pointer;
        height: 100%;
        flex: 1;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 30px;
        color: #fff;
      }
    }
  }
}
</style>
